<template>
  <div>
    <!-- <hade /> -->
    <addBlog
      v-if="addmodel"
      :title="title"
      :echo-data="echoData"
      :txt="content"
      :classblist="classblists"
      :cb="showMeldo"
      :cb-close="modalClose"
    />
    <a-affix :offset-top="0" style="background: white">
      <div class="publishblog">
        <div class="back">
          <div
            style="cursor: pointer"
            @click="
              () => {
                $router.push('/')
              }
            "
          >
            <a-icon type="left" />
            首页
          </div>

          <a-tooltip placement="bottom">
            <template slot="title">
              读取上传文件内容，仅限 txt 和 Markdown 文件
            </template>
            <a-button type="dashed" @click="addfile"> 上传发布 </a-button>
          </a-tooltip>
        </div>
        <div class="inpt">
          <a-input v-model="title" placeholder="文章标题" />
        </div>
        <div class="bnt">
          <a-button type="primary" @click="add"> 发布文章 </a-button>
          <a-button type="dashed" @click="toScatteredIssue">
            零散知识发布
          </a-button>
          <a-button type="primary" icon="download" @click="DWWritingContent">
            下载撰写内容
          </a-button>
        </div>
      </div>
    </a-affix>

    <div class="mavonEditor">
      <no-ssr>
        <mavon-editor
          ref="md"
          v-model="content"
          style="box-shadow: rgb(0 0 0 / 10%) -1px -1px 0px 0px; z-index: 1"
          :toolbars="markdownOption"
          @save="saveMavon"
          @imgAdd="imgAdd"
        />
      </no-ssr>
    </div>

    <div>
      <a-modal v-model="visible" title="Title" on-ok="handleOk">
        <template slot="footer">
          <a-button key="back" @click="visible = false"> 取消 </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="Dw">
            导出
          </a-button>
        </template>

        <a-form>
          <a-form-item label="文件名称">
            <a-input v-model="dw.filename" />
          </a-form-item>
          <a-form-item label="文件类型" has-feedback>
            <a-radio-group v-model="dw.changtype" v-decorator="['radio-group']">
              <a-radio value="txt"> text </a-radio>
              <a-radio value="md"> md </a-radio>
              <a-radio value="c"> 自定义 </a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item v-if="dw.changtype === 'c'" label="自定义文件类型">
            <a-input v-model="dw.inpputType" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>


<script>
import { classblist, updateFile, blogDetail } from '../../api/api'

// 深拷贝
function deep(data) {
  // 第一天条件包含了 null 和 undefined 因为这里不是严格判断
  // 第一个条件  undefined (声明没有赋值) 和 null (一个空指针对象,把一个变量设置为 null 会被垃圾回收机制回收) 在if语句中，都会被自动转为false
  // 第二个条件 判断是否是引用类型  这是使用 typeof来比较得   typeof 检测引用类型有缺点 区分不出来引用类型
  if (data == undefined || typeof data !== 'object') {
    return data
  }
  // 使用 instanceof 来检测引用类型 function、Array、Date，RegExp。
  if (data instanceof Date) return new Date(data)
  if (data instanceof RegExp) return new RegExp(data)
  // 上面拦截了引用类型 用当前得 类型得构造函数创建新的对象
  // 根据当前得得数据类型来构造新的对象
  const newOrg = new data.constructor()
  for (const key in data) {
    // 检测当前对象是否是存在这个key
    if (data.hasOwnProperty(key)) {
      newOrg[key] = deep(data[key])
    }
  }
  return newOrg
}

export default {
  async asyncData(req) {
    const datali = await blogDetail({ id: req.query.id })
    console.log(datali)
    const sendBlog = {
      title: datali?.title,
      content: datali?.txt,
    }
    const echoData = {
      // cover,
      // fingerprint,
      // belongs
    }
    const newData = deep(datali)
    delete newData.txt
    delete newData.title

    newData.cover = newData.cover.split(',')
    console.log(newData, '*********--------*******')

    const { dataList, totalCont } = await classblist()

    return {
      classblists: dataList,
      totalCont,
      queryData: req.query,
      ...sendBlog,
      echoData: newData,
    }
  },
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      dw: {
        changtype: 'md',
        inpputType: '',
        filename: this.title,
      },
      visible: false,
      addmodel: false,
      loading: false,
      title: '',
      classblists: [],
      content: ``,
      queryData: {},
      echoData: {},
      subfield: true,
      code_style: 'solarized-dark',
      externalLink: {
        // hljs_js: function() {
        //   // 这是你的hljs文件路径
        //   return '/highlightjs/highlight.min.js';
        // },
        // hljs_css: function(css) {
        //   // 这是你的代码高亮配色文件路径
        //   return '/highlightjs/styles/' + css + '.min.css';
        // },
        // hljs_lang: function(lang) {
        //   // 这是你的代码高亮语言解析路径
        //
        //   return '/highlightjs/languages/' + lang + '.min.js';
        // },
      },
    }
  },
  watch: {
    // 'dw.changtype': {
    //   handler(newVale, lodValue) {
    //     console.log(newVale, lodValue)
    //     newVale === 'c' && (this.dw.changtype = '')
    //   },
    // },
  },
  mounted() {
    // const saveData = localStorage.getItem('saveData');
    // const {content,title} = JSON.parse(saveData)
    // this.content = content;this.title=title;
  },
  beforeDestroy() {
    const saveData = { content: this.content, title: this.title }
    localStorage.setItem('saveData', JSON.stringify(saveData))
  },
  methods: {
    saveMavon() {
      console.log('保存文章')
    },
    async imgAdd(pos, file) {
      console.log(pos, file)

      const data = new FormData() // 创建表单
      data.append('file', file) // 添加数据到表单

      try {
        const { accessPath } = await updateFile(data)
        this.$refs.md.$img2Url(pos, accessPath?.replaceAll('\\', '/'))
      } catch (error) {
        this.$message.error(`上传图片失败 ${error}`)
      }
    },
    addfile() {
      // 上传文件
      const input = document.createElement('input')
      input.type = 'file'
      input.multiple = 'multiple'
      input.accept = '.txt,.md'
      input.onchange = (e) => {
        const fileInput = e.target // 获取元素
        for (let index = 0; index < fileInput.files.length; index++) {
          const [name] = fileInput.files[index].name?.split('.')
          this.title += name
          this.updateFileReader(fileInput.files[index])
        }
        //
      }
      input.click()
    },
    updateFileReader(file) {
      // 读取文件
      const reader = new FileReader() // 这是核心,读取操作就是由它完成.
      reader.readAsText(file, 'utf-8') // 读取文件的内容,也可以读取文件的URL
      reader.onload = (result) => {
        // 当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
        // console.log(result.target.result)
        this.content += result.target.result
      }
    },
    // 显示的回调函数
    showMeldo() {
      this.addmodel = true
    },
    // 关闭的回调函数
    modalClose() {
      this.addmodel = false
    },
    add() {
      this.addmodel = true
    },
    // 下载撰写内容
    DWWritingContent() {
      this.visible = true
      this.dw.filename = this.title
    },
    Dw() {
      // 文件下载
      this.loading = true
      try {
        const { changtype, inpputType, filename } = this.dw
        const blob = new Blob([this.content], {
          type: 'docx',
        })

        const newtype = inpputType?.replace(
          /\\|\/|\?|\？|\*|\"|\“|\”|\'|\‘|\’|\<|\>|\{|\}|\[|\]|\【|\】|\：|\:|\、|\^|\$|\!|\~|\`|\|/g,
          ''
        )

        // console.log(blob, JSON.stringify(this.content,,))
        const a = document.createElement('a')
        a.href = URL.createObjectURL(blob)
        a.download = `${filename}.${changtype !== 'c' ? changtype : newtype}` // 'fileName.md' // 这里填保存成的文件名
        a.click()
        URL.revokeObjectURL(a.href)
        this.$message.success(`导出 ${a.download} 成功`)
        a.remove()
        this.loading = false
      } catch (error) {
        this.$message.error(`导出失败 ${error}`)
      }
    },
    // 零散知识点发布
    toScatteredIssue() {
      this.$router.push('/md/scattered')
    },
  },
}
</script>

<style lang="less" scoped>
.publishblog {
  display: flex;
  height: 6.25rem;
  align-items: center;
  .back {
    width: 15%;
    display: flex;
    justify-content: space-between;
  }
  .inpt {
    width: 70%;
  }
  .bnt {
    width: 20%;
    display: flex;
    justify-content: center;
  }
}
.blogbox {
  width: 100%;
  display: flex;
  .nav {
    width: 15%;
  }
  .content {
    width: 80%;
  }
}
.mavonEditor {
  width: 100%;
  height: 90vh;
  overflow: auto;
}
</style>
